<template>
  <el-tabs v-model="activeName">
    <el-tab-pane label="生成中间页" name="first">
      <el-form ref="firstForm" :model="firstData" :rules="firstRule" label-width="150px">
        <el-form-item label="目标地址" prop="distUrl">
          <el-col :span="16" :offset="0">
            <el-input
              placeholder="请填写需要跳转到的页面链接"
              v-model="firstData.distUrl"
              clearable
              suffix-icon="el-icon-edit"
            ></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="返回地址" prop="backUrl">
          <el-col :span="16" :offset="0">
            <el-input
              placeholder="请填写从目标页返回到的页面链接"
              v-model="firstData.backUrl"
              clearable
              suffix-icon="el-icon-edit"
            ></el-input>
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="firstCreate">生成</el-button>
        </el-form-item>
      </el-form>
      <el-col :span="24" v-show="firstUrl">{{ firstUrl }}</el-col>
    </el-tab-pane>
    <el-tab-pane label="URL编码" name="second">
      <el-form :model="secondData" label-width="150px">
        <el-form-item label="目标地址" prop="url">
          <el-col :span="16" :offset="0">
            <el-input
              placeholder="请填写需要编/解码页面链接"
              v-model="secondData.url"
              clearable
              suffix-icon="el-icon-edit"
            ></el-input>
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="secondEncode">编码</el-button>
          <el-button type="primary" @click="secondDecode">解码</el-button>
        </el-form-item>
      </el-form>
      <el-col :span="24" v-show="secondUrl">{{ secondUrl }}</el-col>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
  export default {
    data() {
      return {
        activeName: 'first',
        firstData: {
          distUrl: '',
          backUrl: ''
        },
        firstRule: {
          distUrl: [{ required: true, message: '请填写需要跳转到的页面链接', trigger: 'change' }]
        },
        firstUrl: '',
        secondData: { url: '' },
        secondUrl: ''
      }
    },
    methods: {
      firstCreate() {
        this.$refs.firstForm.validate(val => {
          this.firstUrl = val
            ? `/union/magic?url=${encodeURIComponent(
                this.firstData.distUrl
              )}&backUrl=${encodeURIComponent(this.firstData.backUrl)}`
            : ''
        })
      },
      secondEncode() {
        this.secondUrl = encodeURIComponent(this.secondData.url)
      },
      secondDecode() {
        this.secondUrl = decodeURIComponent(this.secondData.url)
      }
    }
  }
</script>

<style></style>
